<template>
  <div>
    <checked-title title="街办部件类案件汇总" />
    <div
      class="anjianCharts"
      id="anjianCharts"
      ref="anjianCharts"
      style="height: 290px"
    ></div>
  </div>
</template>

<script>
import { BuJianMapDB } from "@/api";

export default {
  data() {
    return {
      datalist: [],
    };
  },

  mounted() {
    this.getStreetBaseOrderNum();
  },

  beforeDestroy() {
    this.desHander();
  },

  methods: {
    // 街办部件类案件汇总
    getStreetBaseOrderNum() {
      BuJianMapDB.getStreetBaseOrderNum().then((res) => {
        this.datalist = res.data;
        this.initChart();
      });
    },

    initChart() {
      let XaxioName = []; //名字数组
      let baseNum = []; //部件数量
      let baseNumTop = [];
      let orderNum = []; //关联案件数量
      let orderNumTop = [];
      let orderLv = []; //部件案件率
      this.datalist.forEach((item) => {
        XaxioName.push(item.street);
        baseNum.push(item.baseNum);
        baseNumTop.push({
          value: item.baseNum,
          symbolPosition: "end",
          symbolOffset: [-5, "-50%"],
        });
        orderNum.push(item.orderNum);
        orderNumTop.push({
          value: item.orderNum,
          symbolPosition: "end",
          symbolOffset: [5, "-50%"],
        });
        orderLv.push(item.orderLv);
      });
      const colors = ["#2C61FF", "#FED602", "#ED0C51"];

      let colorsList = ["#FFCC1F", "#EE32FF"];
      // 定义换色数组
      let colorList = [
        ["rgba(245, 247, 250, 0)", "#4F1DF2"],
        ["rgba(245, 247, 250, 0)", "#F0175E"],
      ];

      let chartByaj = echarts.init(this.$refs.anjianCharts);
      let option = {
        color: [
          {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(245, 247, 250, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#2C61FF", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(245, 247, 250, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FE0279", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          "#D7DA00",
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(31, 73, 135, 0.7)',
          formatter: params => {
            let str =
              '部件数量：' + '件' + 
              params[0].data +
              `<br/>关联案件数量：` +
              params[1].data +
              '件' + '<br/>部件案件率' +  params[2].data + '%'
            return str
          }
        },
        grid: {
          // right: '10%',
          left: "5%", // 固定左边刻度宽度
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          right: 0,
          textStyle: {
            color: "#fff",
          },
          data: ["部件数量", "关联案件数量", "部件案件率"],
        },
        dataZoom: {
          show: false,
          startValue: 0,
          endValue: 11,
        },
        xAxis: [
          {
            type: "category",
            show: true,
            boundaryGap: true,
            axisLabel: {
              color: "#fff",
              interval: 0,
              rotate: "45",
              textStyle: {
                color: "#9EADC9",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(4, 187, 255, 1)",
              },
            },
            data: XaxioName,
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            name: '单位: %',
            scale: true,
            position: 'right',
            alignTicks: true,
            // max: 100,
            textStyle: {
              color: '#fff'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: 100
            },
            // 分割线
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(4, 187, 255, 0.2)'
              }
            }
          },
          {
            type: 'value',
            name: '单位： 件',
            scale: true,
            textStyle: {
              color: '#fff'
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: 1000
            },
            // 分割线
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            }
          }
        ],
        series: [
         
          {
            name: "部件数量",
            type: "bar",
            z: 10,
            yAxisIndex: 1,
            data: baseNum,
            barMaxWidth: 8,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 0, 0],
                color: function (params) {
                  return new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[0][0],
                    },
                    {
                      offset: 1,
                      color: colorList[0][1],
                    },
                  ]);
                },
              },
            },
          },
          
          {
            name: "关联案件数量",
            type: "bar",
            yAxisIndex: 1,
            data: orderNum,
            barMaxWidth: 8,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 0, 0],
                color: function (params) {
                  return new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[1][0],
                    },
                    {
                      offset: 1,
                      color: colorList[1][1],
                    },
                  ]);
                },
              },
            },
          },

          //曲线
          {
            name: "部件案件率",
            type: "line",
            data: orderLv,
            symbolSize: 1,
            ssymbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 3,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#D7DA00",
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: colors[4],
                borderColor: colorsList[2],
              },
            },
          },
        ],
      };

      chartByaj.setOption(option, true);
    },

    // 销毁实例
    desHander() {
      let myChart = echarts.init(this.$refs.anjianCharts);
      myChart.dispose();
    },
  },
};
</script>

<style lang="less" scoped>
</style>